<script setup lang="ts">
import { Switch } from 'ant-design-vue';

defineOptions({
  name: 'AppSettingsCommon',
});

const horizontalLayout = ref(false);
</script>

<template>
  <div>
    <h3>通用</h3>
    <div class="setting-line">
      <span>字体大小</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>
    <div class="setting-line">
      <span>组件大小</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>

    <h3>小部件</h3>
    <div class="setting-line">
      <span>启用全局搜索</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>
    <div class="setting-line">
      <span>启用主题切换</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>
    <div class="setting-line">
      <span>启用全屏</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>
    <div class="setting-line">
      <span>启用通知</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>
    <div class="setting-line">
      <span>启用锁屏</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>
    <div class="setting-line">
      <span>启用侧边栏切换</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>
  </div>
</template>

<style scoped lang="less">
.setting-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 6px;
  border-radius: 4px;

  &:hover {
    cursor: pointer;
    background: #f4f4f5;
  }
}
</style>
